{include file="header.html"}
<style>
    body{
        color: #999;
    }
    .header-status{
        margin-top: 10px;
        padding: 5px 20px;
    }
    .e1{
        height:24px;
        line-height:24px;
    }
    .e2{
        width: 100px;
    }

    .package-status .status-list {
        padding: 5px 20px;
        list-style: none;
        font-size: 12px;
    }

    .package-status li{
        position: relative;
        border-left: 1px solid #d9d9d9;
        padding: 5px 0 0 15px;
    }
    .package-status li p {
        line-height: 24px;
    }

    .package-status li.first .node-icon {
        background-position: 0 -72px;
    }
    .package-status li.first{
        color: #f00;
    }

    .node-icon {
        position: absolute;
        left: -6px;
        top: 50%;
        width: 11px;
        height: 11px;
        background: url(themes/mall/default/styles/default/images/member/order-icons.png) -21px -72px no-repeat;
    }
    .node-text{
        padding-left: 15px;
    }
    .time{
        padding-left: 20px;padding-bottom: 5px;border-bottom: 1px solid #d9d9d9;
    }
    .package-status li.last .time{
        border-bottom:none;
    }

</style>
<title>快递信息</title>
<div id="rightTop">
    <p>快递信息</p>
    <ul class="subnav">
        <li><a style="background: #666;color:#fff;" href="javascript:history.back()">返回</a></li>
    </ul>
</div>
<div class="header-status">
    <div class="e1" style="font-size: 16px;">
        <div class="e2" style="color:#666;">物流状态</div>
        <div class="e3" style="color: #f00;font-weight:bold;">{$data.state_str}</div>
    </div>
    <div class="c4"></div>
    <div class="e1">
        <div class="e2">承运公司:</div>
        <div class="e3">{$data.com_str}</div>
    </div>
    <div class="c4"></div>
    <div class="e1">
        <div class="e2">运单编号:</div>
        <div class="e3">{$data.nu}</div>
    </div>
    <div class="c4"></div>
</div>
<div style="background: #eee;height: 20px;"></div>
<div class="package-status" style="margin-top: 10px">
    <div class="status-box" id="status_list">
        <ul id="J_listtext2" class="status-list">
            {foreach from=$data.data item=list name=foo}
            <li class="{if $smarty.foreach.foo.first}first{elseif $smarty.foreach.foo.last}last{/if}">
                <i class="node-icon"></i>
                <p class="node-text">
                    {$list.context}
                </p>
                <p class="node-text time">
                    {$list.time}
                </p>
            </li>
            {/foreach}
        </ul>

    </div>
</div>